<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
							 
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">
			  
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
// debugger ,打桩console.log()
//当debugger或日志输出都不起作用，首先清浏览器缓存，然后再试

$(function(){
	  $("#pageId").load("doPageUI",function(){
		  doGetObjects();//异步加载用户行为信息
	  });
});
//启动ajax异步操作，查询用户行为日志信息
function doGetObjects(){
	//
	$("#checkAll").prop("checked",false);
	//1.定义请求参数
	//在js中，非0数字，非undefined，非空串默认用boolean表达式中都默认为true；0，undefined，空串为false;
	var params={"pageCurrent":1};//当pageCurrent没有值时给一个默认值
	//2.定义请求url
	var url="doFindPageObjects";
    var pageCurrent=$("#pageId").data("pageCurrent");
    if(!pageCurrent) pageCurrent=1;
    //var params = 
    var params={"pageCurrent":pageCurrent};
    var username=$("#searchNameId").val();
    if(username) params.username=username;
	//3.发送异步请求执行查询，并处理结果
	//
	/*$.getJSON(url,params,function(result){
		
		//console.log(result);
		doHandleQueryResponseResult(result);
	}
	);*/
	//简化写法
	$.getJSON(url,params,doHandleQueryResponseResult);
}
//处理查询操作返回的结果
function doHandleQueryResponseResult(result){ //JsonResult
	   // debugger;
	   if(result.state==1){//ok
		//1.呈现当前页的用户行为日志信息
		//2.呈现当前的分页信息
		doSetTableBodyRows(result.data.records);//将数据呈现在页面上 替换tbody中的内容
		//更新页面page.html分页数据
		doSetPagination(result.data); //此方法写到page.html中
		//result.data为服务端业务层返回给控制层的pageObject
	    }else{//异常信息，后续可能修改呈现异常信息的方式
	    	doHandleQueryResonseError(result.message);
	    }  
}
//
function doHandleQueryResonseError(message){
	$("#tbodyId").html(`<tr><td colspan='7'>${message}</td></tr>`);
	doSetPagination({"rowCount":0,"pageCount":0,"pageCurrent":1});
}
//将用户行为日志记录呈现在table的tbody位置
function doSetTableBodyRows(records){
	   //1.获取tbody对象，并清空对象
	   var tBody=$("#tbodyId");
	   tBody.empty();
	   //2.迭代records记录，并将其内容追加到tbody
	  /* for(var i in records){
		   //2.1 构建tr对象
		   var tr=$("<tr></tr>");
		   //2.2 构建tds对象
		   var tds=doCreateTds(records[i]);
		   //2.3 将tds追加到tr中
		   tr.append(tds);
		   //2.4 将tr追加到tbody中
		   tBody.append(tr);
	   }*/
	   //基于数组的foreach函数迭代数组=>为一个箭头运算符
	   records.forEach(item=>{
		   tBody.append(doCreateRow(item))
		   
	   });//基于数据创建当前行函数
}


function doCreateRow(item){
	return `<tr>
	         <td><input type='checkbox' class="cBox" value=${item.id}></td>
	         <td>${item.username}</td>
	         <td>${item.operation}</td>
	         <td>${item.method}</td>
	         <td>${item.params}</td>
	         <td>${item.ip}</td>
	         <td>${item.time}</td>
	         </tr>`
	}
	//查询事件
$(".input-group-btn").on("click",".btn-search",doQueryObjects)
 function doQueryObjects(){
	   //为什么要在此位置初始化pageCurrent的值为1?
	   //数据查询时页码的初始位置也应该是第一页
	   $("#pageId").data("pageCurrent",1);
	   //为什么要调用doGetObjects函数？
	   //重用js代码，简化jS代码编写。
	   doGetObjects();
   }


$(".input-group-btn").on("click",".btn-delete",doDeleteObjects)

 function doDeleteObjects(){
	   //1.获取选中的id值
	   var ids=doGetCheckedIds();
	   if(ids.length==0){
		  alert("至少选择一个");
		  return;
	   }
	   //给出提示信息
	   if(!confirm("确认删除吗？"))return;
	   //2.发异步请求执行删除操作
	   var url="doDeleteObjects";
	   var params={"ids":ids.toString()};
	   //[1,2,3].toString = "1,2,3"
	   console.log(params);
	   //向服务端提交
	   $.post(url,params,function(result){
		   if(result.state==1){
			 alert(result.message);
			 //doGetObjects();
			doRefreshAfterDeleteOK();
		   }else{
			 alert(result.message);
			
		   }
	   });
   }

function doGetCheckedIds(){
	   //定义一个数组,用于存储选中的checkbox的id值
	   var array=[];//new Array();空数组
	   //获取tbody中所有类型为checkbox的input元素
	   $("#tbodyId input[type=checkbox]")
	   //$("#tbody input:checkbox")
	   //迭代这些元素，每发现一个元素都会执行如下回调函数，获取value属性值
	   .each(function(){
		   //假如此元素的checked属性的值为true，获取checkbox对象的checked属性并校验
		   if($(this).prop("checked")){
			   //调用数组对象的push方法将选中对象的值存储到数组
			   array.push($(this).val());
		   }
	   });
	   //3.返回存储了记录id的值
	   return array;
}
$("#checkAll").change(doChangeTBodyCheckBoxState)
//tbody中checkbox对象事件注册
$("#tbodyId").on("click",".cBox",doChangeTHeadCheckBoxState)
function doChangeTBodyCheckBoxState(){
	   //1.获取当前点击对象的checked属性的值  获取thead中checkbox对象状态
	   var flag=$(this).prop("checked");//true or false
	   //2.将tbody中所有checkbox元素的值都修改为flag对应的值。
	   //第一种方案
	   /* $("#tbodyId input[name='cItem']")
	   .each(function(){
		   $(this).prop("checked",flag);
	   }); */
	   //第二种方案  修改tbody中checkbox的值
	   $("#tbodyId input[type='checkbox']")
	   .prop("checked",flag);
}

function doChangeTHeadCheckBoxState(){
	  //1.设定默认状态值
	  var flag=true;
	  //2.迭代所有tbody中的checkbox值并进行与操作
	    //$("#tbodyId input:checkbox")
	  $("#tbodyId input[type='checkbox']")
	  .each(function(){
		  flag=flag&$(this).prop("checked")
	  });
	  //3.修改全选元素checkbox的值为flag
	  $("#checkAll").prop("checked",flag);
 }
//删除以后的刷新操作（要么继续查询当前页数据，要么查询上一页数据-最后一页）
function doRefreshAfterDeleteOK(){
	//1.获得当前页码值，总页数，全选状态
	 var pageCount=$("#pageId").data("pageCount");
	 var pageCurrent=$("#pageId").data("pageCurrent");
	 var allchecked=$("#checkAll").prop("checked");
		//2.基于当前页码值以及全选状态修改当前页码值
	 if(pageCurrent==pageCount&&allchecked&&pageCurrent>1){
		 pageCurrent--;
		 $("#pageId").data("pageCurrent",pageCurrent);
	 }
    doGetObjects();
}

</script>






